﻿@using MM.Data.Entity
@model MM.Web.Models.PaymentModel
@{
    ViewBag.Title = "Index";
}

@{
    ViewBag.Title = "AddNewOperationType";
}

<link rel="stylesheet" href="/resources/demos/style.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="/resources/demos/external/jquery.mousewheel.js"></script>
<style>
    body { font-size: 62.5%; }
    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    input.checkbox { margin-bottom:12px; width:95%; padding: .4em; }
    input.select { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    div#users-contain { width: 350px; margin: 20px 0; }
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }
  </style>

<div id="paymentList">
    @foreach (var jp in Model.JournalPayments)
    {
        <i>Amount:</i>@jp.Amount<i>, Currency:</i>@jp.Currency<i>, OperationTypeOperationTypeId:</i>@jp.OperationTypeId<i>, Description:</i>@jp.Description <br />        
    }
</div>
<div>
    <div class="PostResult" style="display: none">Data saved</div>
    <div>
        <input type="button" id="buttAddNewOperatType" value="Add new operation type"/>
        <input type="button" id="buttAddNewPayment" value="Add new payment"/>
    </div>
    
    @*Add a payment dialog*@
    <div style="display: none" id="dAddPayment" title="Add new payment">
        <p class="validateTips">All form fields are required.</p>
        
        <form id="fAddPayment" action="@Url.Action("AddNewPayment", "MyMoney", new JournalPayment())" method="POST">
            <fieldset>
                <label for="Amount">Amount</label> <input name="Amount" id="Amount" value="5" />
                <label for="CurrencyId">Currency</label> <select name="CurrencyId" class="select ui-widget-content ui-corner-all"></select>
                <label for="Description">Description</label> <input name="Description" type="text" class="text ui-widget-content ui-corner-all"/>
                <label for="DateTime">Date:</label> <input name="DateTime" type="text" id="datepickerPayment" class="text ui-widget-content ui-corner-all" />
                <label for="PriorityId">Priority</label><select id="PriorityId" name="PriorityId" class="select ui-widget-content ui-corner-all"></select>
                <label for="OperationTypeId">Operation Type</label><select id="OperationTypeId" name="OperationTypeId" class="select ui-widget-content ui-corner-all"></select>
            </fieldset>
        </form>
    </div>
    
    @*Add an Operation Type dialog*@
    <div style="display: none" id="dAddOperationType" title="Add new operation type">
        <p class="validateTips">All form fields are required.</p>
        
        <form id="fAddOperationType" action="@Url.Action("AddNewOperationType", "MyMoney", new OperationType())" method="POST">
            <fieldset>
                <label for="NameShort">Name Short</label> <input name="NameShort" type="text" class="text ui-widget-content ui-corner-all"/>
                <label for="NameLong">Name Long</label> <input name="NameLong" type="text" class="text ui-widget-content ui-corner-all"/>
                <label for="IsIncome">Is Income</label> <input name="IsIncome" type="checkbox" value="true" class="checkbox ui-widget-content ui-corner-all"/>
                <label for="ParentId">Parent</label><select id="ParentId" name="ParentId" class="select ui-widget-content ui-corner-all"><option>--no parent--</option></select>
            </fieldset>
        </form>
    </div>

</div>

<script type="text/javascript">
    $(document).ready(function () {
        
    });
</script>

<script type="text/javascript">

    $("#dAddOperationType").dialog({
        autoOpen: false,
        height: 400,
        width: 350,
        modal: true,
        buttons: {
            "Create an Operation Type": function () {
                var bValid = true;
               // allFields.removeClass("ui-state-error");
                //TODO: validation
                if (bValid) {
                    var form = $("form#fAddOperationType");
                    $.ajax({
                        type: "POST",
                        url: '/MyMoney/AddNewOperationType',
                        data: form.serialize(),
                        success: function (data) {
                            if (data.isZeroLevelO == true) {
                                $('form#fAddOperationType > fieldset').children('select[name=ParentId]').append($('<option></option>').text(data.NameLong).attr('value', data.OperationTypeId));
                            }
                            form[0].reset();
                            $('.PostResult').fadeIn(1500).fadeOut(3000);
                        }
                    });
                    
                    $(this).dialog("close");
                }
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function () {
           // allFields.val("").removeClass("ui-state-error");
        }
    });

    $("#dAddPayment").dialog({
        autoOpen: false,
        height: 400,
        width: 350,
        modal: true,
        buttons: {
            "Create a Payment": function () {
                var bValid = true;
                // allFields.removeClass("ui-state-error");
                //TODO: validation
                if (bValid) {
                    var form = $("form#fAddPayment");
                    $.ajax({
                        type: "POST",
                        url: '/MyMoney/AddNewPayment',
                        data: form.serialize(),
                        success: function (data) {
                            form[0].reset();
                            $('.PostResult').fadeIn(1500).fadeOut(3000);
                        }
                    });

                      $(this).dialog("close");
                }
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            // allFields.val("").removeClass("ui-state-error");
        }
    });

    $("#buttAddNewOperatType").button().click(function() {
        $.get('/MyMoney/CreateNewOperationType', null, function(data) {
            var operationParentTypes = data.ParentOperationTypes;
            var operationTypeselector = $('form#fAddOperationType > fieldset').children('select[name=ParentId]');
            operationTypeselector.children("option").remove();
            $.each(operationParentTypes, function(index, item) {
                operationTypeselector.append($('<option></option>').text(item.NameLong).attr('value', item.OperationTypeId));
            });
            $("#dAddOperationType").dialog("open");
        });
    });

    $("#buttAddNewPayment").button().click(function () {
        $.ajax({
            url: '/MyMoney/CreateNewPayment',
            success: function (data) {
                var operationTypes = data.OperationTypes;
                var priorities = data.Priorities;
                var currencyList = data.Currency;
                var operationTypeselector = $('form#fAddPayment > fieldset').children('select[name=OperationTypeId]');
                var priorityselector = $('form#fAddPayment > fieldset').children('select[name=PriorityId]');
                var currencyselector = $('form#fAddPayment > fieldset').children('select[name=CurrencyId]');
                operationTypeselector.children("option").remove();
                priorityselector.children("option").remove();
                currencyselector.children("option").remove();
                $.each(operationTypes, function (index, item) {
                    operationTypeselector.append($('<option></option>').text(item.NameLong).attr('value', item.OperationTypeId));
                });
                $.each(priorities, function (index, item) {
                    priorityselector.append($('<option></option>').text(item.Name).attr('value', item.Id));
                });
                $.each(currencyList, function (index, item) {
                    currencyselector.append($('<option></option>').text(item.Name).attr('value', item.Id));
                });
                $("#dAddPayment").dialog("open");
            }
        });
    });

    $(function () {
        $("#datepickerPayment").datepicker();
    });

    $(function() {
        //        $("#CurrencyId").change(function () {
        //            $("#Amount").spinner("option", "culture", $(this).val());
        //        });

        $("#Amount").spinner({
            min: 5,
            max: 2500,
            step: 25,
            start: 1000,
            numberFormat: "C"
        });
    });
</script>

